import React, { Component } from "react";
import { Modal, Button, Tag, Spin } from "antd";
import ReactJson from "react-json-view";
import { openNotificationWithIcon } from "utils/comm";
import styles from "./index.less";

const Line = (props) => {
  const { label, value } = props;

  return (
    <div className={styles.row}>
      <span className={styles.key}>{label}</span>
      <span className={styles.word}>{value}</span>
    </div>
  );
};

const TAG = {
  成功: "#1E8E3E",
  失败: "#f5222d",
};

class Details extends Component {
  openNotificationWithIcon = openNotificationWithIcon.bind(this);

  state = {
    data: {
      requestUrl: "",
      requestMethod: "",
      operationMethod: "",
      requestParam: "{}",
      responseResult: "{}",
      status: "",
    },
  };

  componentDidMount() {
    const { dispatch, id } = this.props;
    dispatch({ type: "log/detail", payload: { id } }).then(
      ({ errCode, errMsg, datas }) => {
        if (errCode === 0) {
          this.setState({ data: datas });
        } else {
          this.openNotificationWithIcon(
            "error",
            "",
            errMsg || "查询日志详情失败",
          );
        }
      },
    );
  }

  // 关闭详情窗口
  onClose = () => {
    const { toggleVisibie } = this.props;
    toggleVisibie(false);
  };

  render() {
    const { visible, getLoading } = this.props;
    const { data } = this.state;

    return (
      <Modal
        title="操作日志详情"
        width={800}
        visible={visible}
        onCancel={this.onClose}
        footer={[
          <Button key="back" onClick={this.onClose}>
            关闭
          </Button>,
        ]}
        className={styles.root}
      >
        <Spin spinning={getLoading}>
          <div className={styles.content}>
            <Line label="请求地址：" value={data.requestUrl} />

            <Line label="请求方式：" value={data.requestMethod} />

            <Line label="操作方法：" value={data.operationMethod} />

            <div className={styles.row}>
              <span className={styles.key}>请求参数：</span>
              <span className={styles.boxContent}>
                <ReactJson
                  src={data.requestParam ? JSON.parse(data.requestParam) : {}}
                  name={false}
                  displayDataTypes={false}
                />
              </span>
            </div>

            <div className={styles.row}>
              <span className={styles.key}>返回参数：</span>
              <span className={styles.boxContent}>
                <ReactJson
                  src={
                    data.responseResult ? JSON.parse(data.responseResult) : {}
                  }
                  name={false}
                  displayDataTypes={false}
                />
              </span>
            </div>

            <div className={styles.row}>
              <span className={styles.key}>状态：</span>
              <span className={styles.word}>
                {data.status ? (
                  <Tag color={TAG[data.status]}>{data.status}</Tag>
                ) : (
                  ""
                )}
              </span>
            </div>
          </div>
        </Spin>
      </Modal>
    );
  }
}

export default Details;
